<template>
    
    <view  v-if="list.length"  class="m-top20">
        <text class="rel-title">商品推荐</text>
        <!-- 商品列表 -->
          <view class="goods-list clearfix column-2" >
              
            <view class="goods-item" v-for="(item, index) in list" :key="index" @click="onTargetDetail(item.goods_id)">
              
              <!-- 多列显示 -->
              <view  class="">
                <!-- 商品图片 -->
                <view class="goods-image">
                  <image class="image" mode="aspectFill" :src="item.goods_image"></image>
                </view>
                <view class="detail">
                  <!-- 商品标题 -->
                  <view class="goods-name">
                    <text class="twoline-hide">{{ item.goods_name }}</text>
                  </view>
                  <!-- 商品价格 -->
                  <view class="detail-price oneline-hide">
                    <text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
                    <text v-if="item.line_price_min > 0" class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        
    </view>
    
</template>

<script>
    export default{
        props:['list'],
        methods:{
            // 跳转至商品列表页
            onTargetDetail(goodsId) {
              this.$navTo('pages/goods/detail', { goodsId })
            },
        },
    }
</script>

<style lang="less" scoped>
    .rel-title{
        padding: 13px 15px;
        font-size: 14px;
        color:#fe5a31;
        width: 100%;
        display: block;
        text-align: center;
    }
    // 商品列表
    .goods-list {
      padding: 4rpx;
      box-sizing: border-box;
    }
    

    // 平铺显示
    .goods-list.column-2 {
      .goods-item {
        width: 50%;
      }
    }
    
    .goods-item {
      float: left;
      box-sizing: border-box;
      padding: 6rpx;
    
      .goods-image {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
        background: #fff;
    
        &:after {
          content: '';
          display: block;
          margin-top: 100%;
        }
    
        .image {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          -o-object-fit: cover;
          object-fit: cover;
        }
      }
    
      .detail {
        padding: 8rpx;
        background: #fff;
    
        .goods-name {
          min-height: 68rpx;
          line-height: 32rpx;
          white-space: normal;
          color: #484848;
          font-size: 26rpx;
        }
    
        .detail-price {
          .goods-price {
            margin-right: 8rpx;
          }
    
          .line-price {
            text-decoration: line-through;
          }
        }
      }
    }
</style>